<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:body>
        <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Dashboard <small>Dashboard Home</small></h1>
                        <div class="alert alert-success alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                            Welcome to the admin dashboard! Feel free to review all pages and modify the layout to your needs. 
                            For the purpose of data visualization, additional widgets are used, so make sure you review all provided information.
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-3">
                        <div class="panel panel-default ">
                            <div class="panel-body alert-info">
                                <div class="col-xs-5">
                                    <i class="fa fa-users fa-5x"></i>
                                </div>
                                <div class="col-xs-5 text-right">
                                    <p class="alerts-heading">343</p>
                                    <p class="alerts-text">Users</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="panel panel-default ">
                            <div class="panel-body alert-info">
                                <div class="col-xs-5">
                                    <i class="fa fa-file-text-o fa-5x"></i>
                                </div>
                                <div class="col-xs-5 text-right">
                                    <p class="alerts-heading">17453</p>
                                    <p class="alerts-text">Posts</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="panel panel-default ">
                            <div class="panel-body alert-info">
                                <div class="col-xs-5">
                                    <i class="fa fa-question fa-5x"></i>
                                </div>
                                <div class="col-xs-5 text-right">
                                    <p class="alerts-heading">743</p>
                                    <p class="alerts-text">Questions</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="panel panel-default ">
                            <div class="panel-body alert-info">
                                <div class="col-xs-5">
                                    <i class="fa fa-download fa-5x"></i>
                                </div>
                                <div class="col-xs-5 text-right">
                                    <p class="alerts-heading">1453</p>
                                    <p class="alerts-text">Downloads</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Sales personnel Data</h3>
                            </div>
                            <div class="panel-body">
                                <div id="shieldui-grid1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Logins per week</h3>
                            </div>
                            <div class="panel-body">
                                <div id="shieldui-chart2"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Sales Data</h3>
                            </div>
                            <div class="panel-body">
                                <div id="shieldui-chart3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </h:body>
</html>
